<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>GTDOffice</title>
		<!-- Standard framework stylesheets -->
		<link rel="stylesheet" type="text/css" href="css/framework/base.css">
		<link rel="stylesheet" type="text/css" href="css/framework/sprites.css">
		<link rel="stylesheet" type="text/css" href="css/framework/main.css">
		<!-- external stylesheets -->
		<link rel="stylesheet" type="text/css" href="css/task.css">
		
		<!-- lib scripts -->
		<script src="js/lib/jquery/jquery-1.3.2.js"></script>
		<!-- jQuery extensions -->
		<script src="js/lib/plugins/jquery.json-1.3.min.js"></script>
		<script src="js/lib/plugins/jquery.easing.js"></script>
		<script src="js/lib/plugins/jquery.simpleautogrow.js"></script>
		<script src="js/lib/plugins/jquery.autogrow.js"></script>
		<script src="js/lib/plugins/jquery.livequery.js"></script>
		<script src="js/lib/plugins/jquery.utils.js"></script>
		<!-- debugger -->
		<script src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
		<!-- jQuery addOns -->
		<script src="js/lib/addons/jquery.macro-extensions.js"></script>
		<!-- Metadata -->
		<script src="js/framework/metadata.js"></script>
		<!-- Util scripts -->
		<script src="js/util/objects.js"></script>
		<script src="js/util/deff-browser.bugfixer.js"></script>
		<!-- framework scripts -->
		<script src="js/framework/configure.js"></script>
		<script src="js/framework/main.js"></script>
		<script src="js/framework/task-integrator.js"></script>
		<script>
			$(window).load(function(){
				
				$('.task_spadre').livequery('click', function(){
					var $self = $(this);
					
					var taskWrapper = $('.task_template').parent().clone();
					$('.task_template', taskWrapper).removeClass('task_template').fadeIn(600);
					taskWrapper.show().insertBefore($self.parent());
					
					$('div.caption', taskWrapper).mousedown(function(){
						var div_caption = $(this).hide();
						var editor = $('<textarea/>').addClass('caption')
							.val(div_caption[0].data || '')
							.insertBefore(div_caption)
							.blur(function(){
								var caption = this.value;
								div_caption[0].data = caption;
								var trimmedCaption = caption.toString().replace(/\r\n/g, ' ');
								$(this).hide().fadeOut(2000, function(){
									div_caption.text(trimmedCaption).fadeIn(600);
								});
							}).keypress(function(e){
								if(e.keyCode == 27)
									$(this).blur();
								else if(e.keyCode == 9){
									var op = taskWrapper.next();
									if(e.shiftKey)
										op = taskWrapper;
									op.find('.task_spare').trigger('click');
								}
							});
						editor.simpleautogrow();
						editor.focus();
					}).trigger('click');
				});
			});
		</script>
    </head>
    <body>
		<div id='container'>
			<div id='header'>
				<div class='logo'>
					<h1>GTDOffice</h1>
				</div>
				<div class='global_header_nav'>
					<span class='account'>avengerbevis@gmail.com</span>
					<ul class='nav_items'>
						<li><a href='#'>Link1</a></li>
						<li><a href='#'>Link2</a></li>
					</ul>
				</div>
				<div id='activity_message' class='radius_header'>
					<h5>---------Activity Message---------</h5>
					<div class='radius radius_top_left'></div>
					<div class="radius radius_top_right"></div>
				</div>
			</div>
			<div id='content'>
				<div id='context'class='hidden'>
					<div class='radius_header context_header'>
						<h2>Main Context</h2>
						<div class='radius radius_top_left'></div>
						<div class="radius radius_top_right"></div>
					</div>
                    <div class='radius_content'>
                        <ul class='context_items'>
                        	<li><div class='icon icon_1'></div><h2>All tasks</h2></li>
							<li>
                            	<div class='icon icon_4'></div>
                                <h2>Labels</h2>
                                <div class="context_sub_wrapper" style='display : none'>
                                    <ul class='context_sub_items'>
                                        <li>Business</li>
                                        <li>Live</li>
                                        <li>GTDOffice</li>
                                    </ul>
                                </div>
                            </li>
							<li><div class='icon icon_1'></div><h2>Starred</h2></li>
							<li><div class='star star_4'></div><h2>From friends</h2></li>
							<li><div class='star star_1'></div><h2>Shared</h2></li>
							<li>
                            	<div class='icon i4'></div>
                                <h2>Group</h2>
                                <div class="context_sub_wrapper" style='display : none'>
                                    <ul class='context_sub_items'>
                                        <li>I do it</li>
                                        <li>ZPark</li>
                                        <li>Software outsourcing center</li>
                                    </ul>
                                </div>
                            </li>
							<li><div class='icon i3'></div><h2>Trash</h2></li>
                        </ul>
						
						<div class='radius_border content_border_left'></div>
						<div class='radius_border content_border_right'></div>
                    </div>
					
					<div class="radius_footer context_footer">
						<div class='radius radius_bottom_left'></div>
						<div class="radius radius_bottom_right" ></div>
					</div>
				</div>
				<div id='main_content' class='hidden'>
					<div class="radius_header content_header">
						<h2>Main Content</h2>
						<div class='radius radius_top_left'></div>
						<div class="radius radius_top_right"></div>
					</div>
					<div class="radius_content">
						<div id='task_content' class='task_content'>
							<ul>
								<li class='task_template'>
									<div class='task_spare' hover='task_spare-hover'>
									</div>
									<div class='task' hover='task-hover' hidedelay="200">
										<div class='caption_wrapper'>
											<div class='caption'></div>
										</div>
										<div class='bar_sprites' hover="bar_sprites-hover">
											<ul>
												<li><span>Done</span></li>
												<li><span>Detail</span></li>
												<li><span>Share</span></li>
												<li><span>Delete</span></li>
											</ul>
											<div class='radius radius_bottom_left'></div>
										</div>
										<div class='radius radius_top_left'></div>
									</div>
								</li>								
							</ul>
						</div>
						
						<div class='radius_border content_border_left'></div>
						<div class='radius_border content_border_right'></div>
					</div>
					<div class='task_richinfo'>
						<ul class='task_marrow_wrapper'>
							<li class='tag'>
								<label>Label : </label>
								<ul>
									<li>Hello</li>
									<li>To</li>
									<li>The</li>
									<li>World</li>
								</ul>
							</li>
							<li class='task_shorts'>
								<ul>
									<li class='starred'></li>
									<li class='time'>Apr 12 12:20</li>
									<li class='alerm'>Apr12 13:35 alerm</li>
									<li class='etc'></li>
								</ul>
							</li>
							<li class='task_correlate_people'></li>
						</ul>
						<textarea class='task_detail'></textarea>
					</div>
					<div class="radius_footer content_footer">
						<div class='radius radius_bottom_left'></div>
						<div class="radius radius_bottom_right"></div>
					</div>
				</div>
			</div>
			
			<div id='footer' class='radius_content'>
				<div class='radius radius_top_left'></div>
				<div class="radius radius_top_right" ></div>
				<div class='radius radius_bottom_left'></div>
				<div class="radius radius_bottom_right" ></div>
			</div>
		</div>
	        
    </body>
</html>
